@import '../../node_modules/sweetalert2/dist/sweetalert2.min.css';

$width = 80%


#root
	.header
		width 100%
		height 80px
		background-color rgb(42, 42, 42)
		color #fff
		.left
			display inline-block
			height 100%
			padding 20px 32px
			color #fff
			.logo
				width 40px
				height 40px
				vertical-align middle
			.title
				font-size 18px
				font-weight 700
				padding-left 12px
				line-height 40px
		.tab
			display inline-block
			color #fff
			padding-left 64px
			height 100%
			vertical-align middle
			.tab-item
				display inherit
				color #fff
				height 100%
				vertical-align middle
				padding-right 32px
				&:last-of-type
					padding-right 0
				.item
					position relative
					color #fff
					font-size 16px
					line-height 80px
					&:hover
						color #fa3140
		.form-wrapper
			float right
			height 100%
			padding-right 72px
			color #ddd
			.form-item
				padding-top 20px
				color #ddd
				.form-control
					height 100%
					color #ddd
					.input-content
						border 0
						color #ddd
						padding 12px 0 12px 6px
						border-bottom 1px solid #ddd
						background-color transparent
					.submit
						display inline-block
						border 0
						padding-top 12px
						background-color transparent
						.iconfont
							color #ddd
							font-size 16px
		.right
			float right
			height 100%
			display flex
			flex-flow row nowrap
			justify-content center
			align-items center
			.shopcar
				color #ddd
				flex 0 0 100px
				width 100px
				cursor pointer
				&:hover
					color #fa3140
					& > .title
						color #fa3140
				.iconfont
					font-size 24px
					padding-right 12px
					color #ddd
				.title
					color #ddd
			.sign
				flex 1
				padding-left 24px
				color #ddd
				.signin
					display inline-block
					padding-right 32px
					&:hover
						color #fa3140
						cursor pointer
				.signup
					display inline-block
					padding-right 32px
					&:hover
						color #fa3140
						cursor pointer
				&.loging
					position relative
					.personal-wrapper
						cursor pointer
						padding-right 32px
						&:hover > img
							border 2px solid #fa3140
						img
							border-radius 50%
							border 2px solid transparent
					&:hover .information-wrapper
						visibility visible
						opacity 1
					.information-wrapper
						visibility hidden
						opacity 0
						position absolute
						top 100%
						right 12px
						width 280px
						height 260px
						background-color #fff
						box-shadow -2px 2px 5px #ddd
						z-index 1000
						.first
							width 100%
							.left-wrapper
								display inline-block
								width 40%
								vertical-align top
								box-sizing border-box
								padding 24px
								img
									border-radius 50%
							.right-wrapper
								display inline-block
								.name
									padding 48px 12px
									cursor pointer
									color rgba(42, 42, 42, .6)
									&:hover
										text-decoration underline
						.second
							width 100%
							.block-wrapper
								padding 0 24px
								.shopcar
									color rgba(42, 42, 42, .4)
									display inline-block
									padding 6px 4px
									margin-bottom 8px
									margin-right 8px
									font-weight 500
									font-size 12px
									&:nth-of-type(2n)
										margin-right 0
									background-color rgba(147, 153, 159, .2)
									text-align center
									&:hover
										font-weight 700
										background-color rgba(147, 153, 159, .1)
						.signout
							.out
								float right
								padding-right 24px
								padding-top 12px
								&:hover
									color #ddd
	.need-for-signin
		width 9999px
		text-align center
		height 650px
		display table-cell
		vertical-align middle
		img
			line-height 650px
	#personal-wrapper
		width 100%
		.heading
			display flex
			flex-flow row nowrap
			padding 32px 20% 0
			width 100%
			height 240px
			background-image url(/static/system/personal-01jpg)
			background-size 100% 240px
			background-repeat no-repeat
			.left
				flex 0 0 180px
				width 180px
				position relative
				&:hover::after
					opacity 1
					visibility visible
				&::after
					content '更改'
					display block
					position absolute
					top 48px
					width 180px
					height 180px
					color #fff
					border-radius 50%
					text-align center
					line-height 180px
					cursor pointer
					transition all .5s
					background-color rgba(42, 42, 42, .6)
					opacity 0
					visibility hidden
				img
					position relative
					top 48px
					border-radius 50%
				.iconfont
					position absolute
					left 0 
					top 0
					font-size 24px
					color rgba(245, 245, 245, .6)
					&:hover
						color rgba(245, 245, 245, 1)
						cursor pointer
				.file-select
					position absolute
					top 48px
					width 180px
					height 180px
					z-index 999
					opacity 0
					cursor pointer
			.right
				flex 0 0 1
				padding-left 60px
				.nickname
					padding-top 64px
					color #fff
					font-weight 700
					font-size 42px
				.desc
					padding-top 32px
					color rgba(245, 245, 245, .9)
					font-size 16px
					font-weight 500
				.summary
					padding-top 12px
					color rgba(245, 245, 245, .6)
		.personal-center
			width 100%
			min-height 360px
			padding  12px 20% 0
			.tab-menu
				position fixed
				top 360px
				left 20%
				.menu
					.tab
						padding 24px 32px 12px
						font-size 18px
						color #999
						border-bottom 1px solid #ddd
						cursor pointer
						&:hover
							color #fa3140
						&.active
							color #fa3140
			.center-content
				width 50%
				min-height 360px
				margin-left 220px
				.personal-setting
					.personal-heading
						text-align left
						font-size 18px
						padding 12px 24px 18px
						border-bottom 2px solid #ddd
						.edit
							float right
							font-size 14px
							color rgb(16, 43, 122)
							&:hover
								cursor pointer
					.content
						padding 24px 48px
						form
							.edit-control
								padding 12px
								margin-bottom 12px
								.title
									display inline-block
									max-width 64px
									padding 16px 36px
									background-color rgb(243, 245, 247)
								[type=text]
									background-color #fff
									min-width $width
									padding 12px
									margin-left 24px
									border 0
									border-bottom 1px solid #ddd
									@media screen and (max-width: 1600px)
										min-width 50%
								[type=radio]
									padding 12px
									margin-left 24px
								textarea
									border 1px solid #ddd
									border-radius 6px
									width $width
									min-height 240px 
									padding 12px
									margin-left 24px
									vertical-align top
				.personal-course
					.personal-heading
						text-align left
						font-size 18px
						padding 12px 24px 18px
						border-bottom 2px solid #ddd
					.course-wrapper
						margin-top 18px
						.course-list
							.course-item
								display flex
								flex-flow row nowrap
								position relative
								padding 24px 0
								border-bottom 1px solid #ddd
								&:last-of-type
									border-bottom 0
								.left
									flex 0 0 220px
									width 220px
								.right
									flex 1
									padding-left 24px
									.title
										font-size 18px
										font-weight 700
										padding 18px 6px
									.total-time
										color #fa3140
										padding 12px
									.desc
										font-weight normal
										padding 12px
								.continue
									position absolute
									right 0
									bottom 32px
									padding 10px 24px
									border 1px solid #fa3140
									cursor pointer
									color #fa3140
									&:hover
										background-color #fa3140
										color #fff
	.footer
		width 100%
		min-height 150px
		background-color rgb(42, 42, 42)
		.footer-wrapper
			padding 32px 300px
			text-align center
			.first-line
				padding 12px
				.iconfont
					color #ddd
					font-size 32px
					&:hover
						color #fa3140
			.second-line
				font-size 16px
				font-weight 700
				padding 12px 0
				border-bottom 1px solid #666
				a
					color #ddd
					padding-left 24px
					padding-right 24px
					border-right 1px solid #ddd
					&:last-of-type
						border-right 0
				& > a:hover
					color #fa3140
			.last-line
				padding 12px 0 0 0
				color #ddd
				font-size 12px
				font-weight normal